<template>
	<view class="conter">
		<view class="contenONcst">
			<view class="uerrimg">
				<!-- <image class="imga-s" src="../../static/logo.png" mode=""></image> -->
				<button  class="imgesiYs" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				  <image class="imga-s" v-if="avatarUrl" :src="avatarUrl?(avatarUrl):avatar"></image>
				  <image v-else-if="avatar" class="imga-s" src="../../static/132.jpeg" mode=""></image>
				</button> 
				<view class="icon">
				</view>
			</view>
		</view>
		
		<view class="conterList">
			<view class="conlits">
				<view class="title">昵称</view>
				<mp-form>
				  <mp-cells>
					<mp-cell title="昵称">
					  <input type="nickname" @input="nicknameCone"  v-model="nickname"  class="weui-input" placeholder="请输入昵称"/>
					</mp-cell>
				  </mp-cells>
				</mp-form>
				<!-- <input type="text" placeholder="请输入昵称"> -->
			</view>
			<view class="conlits">
				<view class="title">接单地区</view>
				<picker @change="dangUXnsFun" :range="dangUXns" range-key="name">
					<view class="flex-line-height flex-height-between tab-anv-list-right">
						<view class="uni-input">{{formData.politics_status || '请选择' }}</view>
					</view>
				</picker>
			</view>
			<view class="conlits">
				<view class="title">联系方式</view>
				<input type="text" v-model="phone"  placeholder="请输入手机号码">
			</view>
			<view class="conlits">
				<view class="title" >微信号</view>
				<input type="text" v-model="wechat_id" placeholder="请输入微信号">
			</view>
			<button class="baochun" @click="updateUserInfo">保存</button>
		</view>
	</view>
</template>

<script>
	// import {onShareTimeline,onShareTimeline} from "../../utils/share.js";
	// console.log(share)
	import _data from '../../common/_data';
	import _get from '../../common/_get';
	import {
		Request
	} from '@/utils/request.js';
	// staticPhoto
	export default{
		data(){
			return {
				referral_code:"",
				token:uni.getStorageSync('token'),
				avatarUrl:'',
				avatar:require('./../../static/132.jpeg'),
				theme:'',
				nickname:'',
				phone:"",
				wechat_id:"",
				user_info:{},
				formData:{},
				politics_statusIndex:'',
				dangUXns:[],
				group_id:'',
			}
		},
		computed:{
			staticPhoto () {
			  return _data.static_url();
			},
		},
		onLoad(e) {
			this.getbase()
		},
		onUnload(){
			 uni.$off('data_user_info');
		},
		onShow() {
			let _this=this;
			 uni.$off('data_user_info');
			uni.$on('data_user_info', function (data) {
				//console.log(data);
			  _this.my_data = data;
			  _this.user_info=data;
			  _this.dangUXns=data.groups;
			  data.groups.map((item,index)=>{
				  if(data.list_id==item.list_id){
					  _this.formData={
					  	..._this.formData,
					  	politics_status:item.name,
					  }
					  _this.group_id=item.list_id;
					  _this.politics_statusIndex=index
				  }
			  })
			  
			  _this.nickname=data.username;
			  _this.avatarUrl=data.photo;
			  // username:_this.nickname,
			  // headimgurl:_this.avatarUrl,
			   _this.phone=data.phone;
			   _this.wechat_id=data.wechat_id;
			   uni.setStorageSync('user_info', JSON.stringify(data));
			});
		},
	
		methods:{
			nicknameCone(e){
				this.nickname=e.detail.value
			},
			dangUXnsFun(e){
				this.formData={
					...this.formData,
					politics_status:this.dangUXns[e.detail.value].name,
				}
				this.group_id=this.dangUXns[e.detail.value].list_id;
				this.politics_statusIndex=e.detail.value
			},
			
			// this.$httpSend({
			//   path: '/im/action/groupState',
			//   data: { list_id: _this.list_id },
			//   success (res) {
			updateUserInfo(e){
				let _this=this;
				if(!this.avatarUrl){
					uni.showToast({
					  title: '请选择头像',
					  icon: 'none'
					});
					return false;
				} 
				if(!this.nickname){
					uni.showToast({
					  title: '请输入用户名称',
					  icon: 'none'
					});
					return false;
				}
				if(!this.phone){
					uni.showToast({
					  title: '请输入手机号',
					  icon: 'none'
					});
					return false;
				}
				if(!this.group_id){
					uni.showToast({
					  title: '请选择接单地区',
					  icon: 'none'
					});
					return false;
				}
				//console.log(_this.dangUXns[_this.politics_statusIndex])
				this.$httpSend({
					path:"/im/user/updateUserInfo",
					data:{
						phone:_this.phone,
						username:_this.nickname||'',
						headimgurl:_this.avatarUrl||'',
						wechat_id:_this.wechat_id||'',
						list_id:_this.group_id||'',
					},
					success(e){
						_this.user_info.username=_this.nickname
						_this.user_info.photo=_this.avatarUrl
						 uni.setStorageSync('user_info', JSON.stringify(_this.user_info));
						uni.redirectTo({
						  url: '/pages/index/index'
						})
					}
				})
			},
			getImage (avatarUrl) {
				let _this=this;
				 this.$httpSendFile({
				   type: 1,
				   local_url: avatarUrl,
				   success (data) {
					_this.avatarUrl=data.img_url+"?arr="+Date.now();
				   }
				 });
			},
			getbase(){
				if(this.token){
					_get.base();
				}
			},
			// 
			
			onChooseAvatar(e){
				let _this=this;
				_this.getImage(e.detail.avatarUrl)
				// uni.getImageInfo({
				//   src: e.detail.avatarUrl,
				//   success: (image) => {
				// 	  console.log(image)
				//   }
				// });
				// https://im.numtwin.com/im/upload/photo
			},
			// /im/user/bindGroup
			openFanshu(){
				uni.navigateBack({ delta: 1 })
			},
			// /im/get/chatList
			 getUserInfo(e) {
				 console.log(e);
			      if (e.mp.detail.userInfo) {
			        this.userInfo = e.mp.detail.userInfo;
			        this.hasUserInfo = true;
			        this.login({
						userInfo:e.mp.detail.userInfo
					});
			      } else {
			        uni.showModal({
			          title: '警告',
			          content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!',
			          showCancel: false,
			          confirmText: '返回授权',
			          success: function(res) {
			            if (res.confirm) {
			              console.log('用户点击了“返回授权”');
			            }
			          }
			        });
			      }
			    },
				 login(ObsJUs) {
				      uni.login({
				        provider: 'weixin',
				        success: (loginRes) => {
				          // 登录成功，获取用户code
						  console.log(ObsJUs)
				          const { code } = loginRes;
						  console.log(code)
						  // return false;
				          // 发送code到后台换取openId, sessionKey, unionId
				          uni.request({
				            url: 'https://im.xwjgene.com/im/in/getAuthLogin', // 你的登录API地址
				            method: 'POST',
				            data: {
				              code,
							  client_id:'',
							  referral_code:this.referral_code,
							  userinfo:JSON.stringify(ObsJUs.userInfo),
				            },
				            success: (res) => {
							  console.log(res)
				              if (res.data.err==0) {
				                // 将用户信息和session存储到本地
								uni.setStorageSync('token', res.data.data.token);
								this.token=res.data.data.token;
								
								
								
								this.getbase();
								// uni.navigateBack({ delta: 1 })
								
				              } else {
				                uni.showToast({
				                  title: '登录失败',
				                  icon: 'none'
				                });
				              }
				            },
				            fail: () => {
				              uni.showToast({
				                title: '请求失败',
				                icon: 'none'
				              });
				            }
				          });
				        },
				        fail: (err) => {
				          console.log('uni.login 接口调用失败，将无法正常使用开放接口等服务', err);
				          uni.showToast({
				            title: '登录失败',
				            icon: 'none'
				          });
				        }
				      });
				    },
			
		}
	}
</script>


<style scoped>
	.conter{
		min-height: 100vh;
		box-sizing: border-box;
		padding: 0 24rpx;
		background-color: #F7F8FA;
	}
	.contenONcst{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.imga-s{
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
	}
	.uerrimg{
		padding-top: 56rpx;
		width: 160rpx;
		height: 160rpx;
		position: relative;
		border-radius: 50%;
		margin-bottom: 80rpx;
	}
	.imgesiYs{
		display: block;
		border: none;
		padding: 0 ;
		margin: 0;
		box-shadow: none;
		    width: 160rpx;
		    height: 160rpx;
			border-radius: 50%;
		box-sizing: initial;
		background-color: transparent;
	}
	.icon{
		width: 56rpx;
		height: 56rpx;
		position: absolute;
		bottom: 0;
		right: 0;
		border-radius: 50%;
		background: #256FF3;
	}
	.conlits{
		width: 702rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		height: 88rpx;
		line-height: 88rpx;
		background: #FFFFFF;
		margin-bottom: 24rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}
	.conlits input{
		line-height: 72rpx;
		height: 72rpx;
		width: 502rpx;
		
	}
	.conlits .title{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #616974;
		padding-left: 24rpx;
		width: 200rpx;
		box-sizing: border-box;
		line-height: 36rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.baochun {
		width: 702rpx;
		height: 80rpx;
		background: #256FF3;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 80rpx;
		font-style: normal;
		text-transform: none;
	}
</style>